<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "headlinerModule"
})
</script>

<template>
    <div>
        <div class="sub-container" style="margin-top: -40px;margin-bottom: 20px">
            <div class="phone-class-list">
                <div class="sub-top-title">
                    <img src=""
                         alt=""
                            class="title-icon"
                    />
                    <span class="title-course">头条精选</span>
                    <span class="more-course"
                    ><a href="/other/search?type=free" class="" style="color: #999">
                更多
                <i
                        aria-label="icon: right-circle"
                        class="anticon anticon-right-circle"
                ><svg
                        viewBox="64 64 896 896"
                        data-icon="right-circle"
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                        focusable="false"
                        class=""
                >
                    <path
                            d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"
                    ></path>
                    <path
                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                    ></path></svg></i></a
                    ></span>
                </div>
            </div>
            <div class="freeClass-main">
                <ul class="discountList">
                    <li id="col">
                        <div style="margin-bottom: 10px;">
                            <a style="text-decoration: none;">
                                <div style="height: auto;margin-bottom: 6px;}">
                                    <div class="box">
                                        <img src="https://online-course.nos-eastchina1.126.net/3-1714567989216411648.jpg"
                                             alt="" style="width: 100%;    border-radius: 10px 10px 0 0;">
                                    </div>
                                </div>
                                <div class="footText"> 走进“企业”—— 促进“就业”</div>
                            </a>
                        </div>
                    </li>
                    <li id="col">
                        <div style="margin-bottom: 10px;">
                            <a style="text-decoration: none;">
                                <div style="height: auto;margin-bottom: 6px;}">
                                    <div class="box">
                                        <img src="https://online-course.nos-eastchina1.126.net/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230922133747-1706231848796946432.jpg"
                                             alt="" style="width: 100%; height: 108px;   border-radius: 10px 10px 0 0;">
                                    </div>
                                </div>
                                <div class="footText"> 秋天收获的不只有果实，还有......</div>
                            </a>
                        </div>
                    </li>
                    <li id="col">
                        <div style="margin-bottom: 10px;">
                            <a style="text-decoration: none;">
                                <div style="height: auto;margin-bottom: 6px;}">
                                    <div class="box">
                                        <img src="https://online-course.nos-eastchina1.126.net/IMG_20230904_160350-1700452227744792576.jpg"
                                             alt="" style="width: 100%; height: 106px;   border-radius: 10px 10px 0 0;">
                                    </div>
                                </div>
                                <div class="footText"> 毕业生迈入社会前的重要一课！</div>
                            </a>
                        </div>
                    </li>
                    <li id="col">
                        <div style="margin-bottom: 10px;">
                            <a style="text-decoration: none;">
                                <div style="height: auto;margin-bottom: 6px;}">
                                    <div class="box">
                                        <img src="https://online-course.nos-eastchina1.126.net/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230812163318-1690279853107970048.jpg"
                                             alt="" style="width: 100%;  height: 106px;  border-radius: 10px 10px 0 0;">
                                    </div>
                                </div>
                                <div class="footText"> 见证成长，收获改变，你们在天亮变的更优秀</div>
                            </a>
                        </div>
                    </li>
                    <li id="col">
                        <div style="margin-bottom: 10px;">
                            <a style="text-decoration: none;">
                                <div style="height: auto;margin-bottom: 6px;}">
                                    <div class="box">
                                        <img src="https://online-course.nos-eastchina1.126.net/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230724182451-1683637292469583872.jpg"
                                             alt="" style="width: 100%; height: 106px;   border-radius: 10px 10px 0 0;">
                                    </div>
                                </div>
                                <div class="footText"> 与天亮共赴一场双赢的盛宴</div>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.sub-container{
  width: 1110px;
  height: 300px;
  background: #fff;
  padding: 30px 20px;
  margin: 15px auto 0;
  border-radius: 20px;
}
.sub-container > .phone-class-list{
  margin-left: -8px;
  margin-right: -8px;
  position: relative;
  height: auto;

}
.sub-container > .phone-class-list>.sub-top-title{
  display: flex;
  align-items: center;
  font-size: 24px;
  padding: 0 12px 10px 0;
  border-bottom: 2px solid #e8e8e8;
}
.sub-container > .phone-class-list>.sub-top-title >.title-icon{
  width: 38px!important;
  margin-right: 15px;
}
.sub-container > .phone-class-list>.sub-top-title >.title-img{
  margin-left: 8px;
  width: 93px;
}
.sub-container > .phone-class-list>.sub-top-title >.title-course{
  font-weight: 600;
}
.sub-container > .phone-class-list>.sub-top-title >.more-course{
  font-size: 16px;
  line-height: 34px;
  margin-left: auto;
}
.discountList {
  margin-left: -40px;
}
#col {
  width: 19%;
  background: #fff;
  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .15);
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .15);
  border-radius: 10px;
  float: left;
  margin: 14px .5% 0;
  list-style: none;
}

.box {
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.footText {
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 14px;
  color: black;
}

.footText:hover {
  color: #00b278;
}

</style>